<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/10/5
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <!-- 帖子 -->
    <title>Forum</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css">
    <!-- 引入导航css -->
    <link rel="stylesheet" href="${path}/css/person/person.css">
    <!-- 引入论坛首页forum-css -->
    <link rel="stylesheet" href="${path}/css/forum-css/forum.css">
    <!-- 引入layUi - css -->
    <link rel="stylesheet" href="${path}/plugins/layui/css/layui.css">
</head>
<body>
<!--导航-->
<%@include file="../sharedper/nav.jsp"%>

<!-- 轮播 -->
<div id="background">
    <div id="myCarousel" class="carousel slide a">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner" style="height: 500px">
            <div class="item active background1">
                <img src="${path}/imgs/forum-imgs/lunbo1.jpg" alt="First slide"
                     style="margin: 0 auto; height: 500px;width: 1200px;">
                <div class="carousel-caption"></div>
            </div>
            <div class="item background2">
                <img src="${path}/imgs/forum-imgs/lunbo1.jpg" alt="Second slide"
                     style="margin: 0 auto; height: 500px;width: 1200px;">
                <div class="carousel-caption"></div>
            </div>
            <div class="item background3">
                <img src="${path}/imgs/forum-imgs/lunbo3.png" alt="Third slide"
                     style="margin: 0 auto; height: 500px;width: 1200px;">
                <div class="carousel-caption"></div>
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<!-- 热门帖子与俱乐部模块 -->
<div>
    <div style="width:500px; margin: 0 auto;font-size: 25px; margin-top: 20px">
        <span id="retie" class="retie1" onclick="hot()">热门精华</span>
        <span id="jlb" class="jlb1" href="#" onclick="club()">俱乐部模块</span>
    </div>
    <hr>
    <hr id="hr" class="hr1">

    <!-- 分类 -->
    <div id="club" class="club1">
        <div style="width: 52%; height: 500px; margin: 40px auto">
            <c:forEach items="${themeList}" var="themeList">
                <a href="${path}/themeF/themes?themeId=${themeList.themeId}">
                    <div class="col-md-4">
                        <div class="fl1">
                            <img class="flImg" src="${themeList.themeImg}" alt=""><br>
                        </div>
                        <div style="width: 100%;">
                            <span style="font-size: 16px;">${themeList.themeName}</span><br>
                            <%--<span class="glyphicon glyphicon-file" style="color: #9d9d9d;">${requestScope.postThemeNum}</span>--%>
                            <p style="height: 50px"></p>
                        </div>
                    </div>
                </a>
            </c:forEach>
        </div>
    </div>
    <!-- 热门帖子 -->
    <div id="hotPost" class="hot1">
        <c:forEach items="${postvoList}" var="postvoList">
            <div id="hot">
                <div style="height: 50px">
                    <a href="#" id="header">
                        <img id="headImg" src="${postvoList.userInfo.picfilename}" alt="图片加载失败">
                        &nbsp;&nbsp;${postvoList.userInfo.uName}
                    </a>
                </div>
                <a href="${path}/com/comment?postId=${postvoList.post.postId}">
                    <div>
                        <div id="content">
                            <p id="title">${postvoList.post.title}</p>
                            <button id="hotBut">热帖</button>
                            <br><br>
                            <div style="color: #9d9d9d;height: 40px;overflow: hidden;">${postvoList.post.postContent}</div>
                        </div>
                    </div>
                </a>
            </div>
        </c:forEach>
    </div>




</div>

<script type="text/javascript" src="${path}/plugins/layui/layui.all.js"></script>
<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>
<!-- 引入forum - js -->
<script src="${path}/js/forum-js/forum.js"></script>

</body>
</html>